<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>accordion demo </title>
<link type="text/css" rel="stylesheet"  href="../highlight/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
</head>
<body>
    <div class="wrapper">
        <h1>配置direction为horizontal使得accordion水平展开</h1>
        
        <div class="demo-show" ms-controller="demo">
            <div ms-widget="accordion,aa,$aaOpts">
            </div>
            <script> 
                require(["accordion/avalon.accordion"], function($$) {
                    $$.define('demo',function(vm){
                        vm.$aaOpts = {
                            data: [{
                                'title': '标题1',
                                'content': '<p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的</p>'
                            }, {
                                'title': '标题2',
                                'content': '<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出婉转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。雨是最寻常的，一下就是三两天。可别恼，看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼</p>'
                            }, {
                                'title': '标题3',
                                'content': '<p>傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；刚起头儿，有的是工夫，有的是希望</p>'
                            }, {
                                'title': '标题4',
                                'content': '<p>春天像刚落地的娃娃，从头到脚都是新的，它生长着。春天像小姑娘，花枝招展的，笑着，走着。春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去</p>'
                            }, {
                                'title': '标题5',
                                'content': '<p>盼望着，盼望着——对称句，在一般的课堂上称之为排比。不过我希望大家忘掉这些。我们之前讲过了，现代的修辞方式，按大类分有六十种；按小类分有七八十种。如果从修辞入手，那孩子学起来太痛苦，我们就讲“对称”。中国古文的修辞方式只有三种：兴、比、赋，对称就是赋，但是兴、比、赋本质上来讲是一个东西，不是三样东西。就有如我们剥橘子，是一瓣一瓣的，这一瓣一瓣构成了橘子的整体，不能简单地分开。之前，为了便于大家能更简单地理解兴、比、赋，曾举过一个例子：东方红，太阳升，中国出了个毛泽东。这一句话，把兴、比、赋全表现出来了</p>'
                            }],
                            triggerType: "mouseenter",
                            initIndex: 1,
                            direction: "horizontal"
                        }
                    });
                    $$.scan();
                });
            </script>
        </div>

        <div ms-skip>
            <pre class="brush: js; html-script: true; gutter: false; toolbar: false">
                &lt;!DOCTYPE HTML&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta charset='utf-8'/&gt;
                    &lt;title&gt;accordion demo 1&lt;/title&gt;
                    &lt;script src='avalon.js'&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;div class="demo-show" ms-controller="demo"&gt;
                        &lt;div ms-widget="accordion,aa,$aaOpts"&gt;
                        &lt;/div&gt;
                        &lt;script&gt; 
                            require(["accordion/avalon.accordion"], function($$) {
                                $$.define('demo',function(vm){
                                    vm.$aaOpts = {
                                        data: [{
                                            'title': '标题1',
                                            'content': '&lt;p&gt;盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的&lt;/p&gt;'
                                        }, {
                                            'title': '标题2',
                                            'content': '&lt;p&gt;桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出婉转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。雨是最寻常的，一下就是三两天。可别恼，看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼&lt;/p&gt;'
                                        }, {
                                            'title': '标题3',
                                            'content': '&lt;p&gt;傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；刚起头儿，有的是工夫，有的是希望&lt;/p&gt;'
                                        }, {
                                            'title': '标题4',
                                            'content': '&lt;p&gt;春天像刚落地的娃娃，从头到脚都是新的，它生长着。春天像小姑娘，花枝招展的，笑着，走着。春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去&lt;/p&gt;'
                                        }, {
                                            'title': '标题5',
                                            'content': '&lt;p&gt;盼望着，盼望着——对称句，在一般的课堂上称之为排比。不过我希望大家忘掉这些。我们之前讲过了，现代的修辞方式，按大类分有六十种；按小类分有七八十种。如果从修辞入手，那孩子学起来太痛苦，我们就讲“对称”。中国古文的修辞方式只有三种：兴、比、赋，对称就是赋，但是兴、比、赋本质上来讲是一个东西，不是三样东西。就有如我们剥橘子，是一瓣一瓣的，这一瓣一瓣构成了橘子的整体，不能简单地分开。之前，为了便于大家能更简单地理解兴、比、赋，曾举过一个例子：东方红，太阳升，中国出了个毛泽东。这一句话，把兴、比、赋全表现出来了&lt;/p&gt;'
                                        }],
                                        triggerType: "mouseover",
                                        initIndex: 1,
                                        direction: "horizontal"
                                    }
                                });
                                $$.scan();
                            });
                        &lt;/script&gt;
                    &lt;/div&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            </pre>
        </div>
    </div>
</body>
</html>

